{%extends "base.html"%}
{%block head%}

<style>
    .problem-meta {
        padding-bottom: 30px;
        word-wrap: break-all;
    }
</style>
<script src="/static/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/ace/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>

{%endblock%}
{%block body%}

<!-- <script src="/static/vue2-ace.js"></script> -->
<script>

    var show_problem;
    Vue.component("editor", {
        delimiters: ['{[', ']}'],
        render: function (h) {
            var height = this.height ? this.px(this.height) : '100%'
            var width = this.width ? this.px(this.width) : '100%'
            return h('div', {
                attrs: {
                    style: "height: " + height + '; width: ' + width,
                }
            })
        },
        props: {
            value: {
                type: String,
                required: true
            },
            lang: String,
            theme: String,
            height: true,
            width: true,
            options: Object
        },
        data: function () {
            return {
                editor: null,
                contentBackup: ""
            }
        },
        methods: {
            px: function (n) {
                if (/^\d*$/.test(n)) {
                    return n + "px";
                }
                return n;
            }
        },
        watch: {
            value: function (val) {
                if (this.contentBackup !== val) {
                    this.editor.session.setValue(val, 1);
                    this.contentBackup = val;
                }
            },
            theme: function (newTheme) {
                this.editor.setTheme('ace/theme/' + newTheme);
            },
            lang: function (newLang) {
                this.editor.getSession().setMode('ace/mode/' + newLang);
            },
            options: function (newOption) {
                this.editor.setOptions(newOption);
            },
            height: function () {
                this.$nextTick(function () {
                    this.editor.resize()
                })
            },
            width: function () {
                this.$nextTick(function () {
                    this.editor.resize()
                })
            }
        },
        beforeDestroy: function () {
            this.editor.destroy();
            this.editor.container.remove();
        },
        mounted: function () {
            var vm = this;
            var lang = this.lang || 'text';
            var theme = this.theme || 'chrome';

            // require('brace/ext/emmet');

            var editor = vm.editor = ace.edit(this.$el);
            this.$emit('init', editor);

            editor.$blockScrolling = Infinity;
            //editor.setOption("enableEmmet", true);
            editor.getSession().setMode('ace/mode/' + lang);
            editor.setTheme('ace/theme/' + theme);
            editor.setValue(this.value, 1);
            this.contentBackup = this.value;
            editor.setFontSize(18);
            editor.setOption("wrap", "free");
            ace.require("ace/ext/language_tools");
            editor.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true,
                enableLiveAutocompletion: true
            });
            editor.on('change', function () {
                var content = editor.getValue();
                vm.$emit('input', content);
                vm.contentBackup = content;
            });
            if (vm.options)
                editor.setOptions(vm.options);
        }
    });
    $(document).ready(() => {
        // ace.require("ace/ext/language_tools");
        show_problem = new Vue({
            el: "#show-problem",
            delimiters: ['{[', ']}'],
            mixins: [baseMixin],
            data: {
                data: {},
                langs: {},
                selected_id: "",
                code: "",
                done: false, contestID: -1, problemID: -1, usedParameters: []
            }, methods: {
                submit: function () {
                    $.post("/api/submit", { contest_id: contestID, problem_id: problemID, code: this.code, language: this.selected_id, usedParameters: JSON.stringify(this.usedParameters) }).done(ctx => {
                        ctx = JSON.parse(ctx);
                        if (ctx.code) {
                            showErrorModal(ctx.message);
                            return;
                        }
                        window.location.href = "/show_submission/" + ctx.submission_id;
                    })
                }
            }, watch: {
            }, computed: {
                total_score: function () {
                    var result = 0;
                    this.data.subtasks.forEach((x) => result += x.score);
                    return result;
                }
            }
        });
        Vue.component("problem-meta", {
            delimiters: ['{[', ']}'],
            data() {
                return {
                    "html_content": ""
                }
            },
            template: '<div class="ui container problem-meta"  v-if="value!=\'\'"><div class="ui fluid two column grid"><div class="ui column">\
                            <div class="ui header"><h3>{[name]}</h3></div></div><div class="ui right aligned column">\
                                <div class="ui tiny orange circular icon button" @click="copy_text(value)"><i class="clipboard outline icon"></i></div>\
                                    </div></div>    <div class="ui stack segment"><div  v-html="html_content" v-if="!use_pre"></div><pre v-html="html_content" style="white-space:pre-wrap;word-break:break-word;" v-else></pre>    </div></div>',
            props: {
                //内容
                value: {
                    type: String, default: ""
                }, name: {
                    //显示名
                    type: String, default: ""
                }, render: {
                    //是否渲染Markdown
                    type: Boolean, default: true
                }, use_pre: {
                    //是否使用预格式化块
                    type: Boolean, default: false
                }
            },
            methods: {
                copy_text: copy_text
            }, mounted() {
                // const converter = new showdown.Converter();
                if (this.render)
                    this.html_content = converter.makeHtml(this.value);
                else {
                    this.html_content = this.value;
                }
            }
        });

        let splits = window.location.href.split("/");
        let problemID = splits.pop();
        splits.pop();
        let contestID = splits.pop();
        show_problem.contestID = contestID;
        show_problem.problemID = problemID;

        axios.post("/api/contest/problem/show", { contestID: contestID, problemID: problemID }).then(ctx => {
            ctx = ctx.data;
            if (ctx.code != 0) {
                if (ctx.is_remote) {
                    window.location.href = "/remote_judge/show_problem/contest_problem?contest_id=" + contestID + "&contest_problem_id=" + problemID;
                }
                $("#no-perm-text").text(ctx.message);
                $("#no-perm-modal").modal("show");
                return;
            }
            $("title").text(ctx.data.title + " - " + ctx.data.id + " - {{APP_NAME}}");
            show_problem.data = ctx.data;
            show_problem.code = show_problem.data.last_code;
            // console.log()

            $.post("/api/get_supported_langs").done((ctx) => {
                ctx = JSON.parse(ctx);
                var obj = {}
                ctx.list.forEach((x) => {
                    obj[x.id] = x;
                })
                show_problem.langs = obj;
                if (show_problem.data.last_lang != "") {
                    show_problem.selected_id = show_problem.data.last_lang;
                } else {
                    show_problem.selected_id = ctx.list[0].id;
                }
                show_problem.done = true;
            })
        });

    });

</script>
<div style="top:10%;max-width: 700px;">

    <div id="show-problem" v-if="done">

        <div class="ui header">
            <h1> {[data.id]}: {[data.title]} </h1>
        </div>

        <problem-meta name="题目背景" v-bind:value="data.background"></problem-meta>
        <problem-meta name="题目内容" v-bind:value="data.content"></problem-meta>
        <problem-meta name="输入格式" v-bind:value="data.input_format"></problem-meta>
        <problem-meta name="输出格式" v-bind:value="data.output_format"></problem-meta>
        <div class="ui two column grid" v-for="item,index in data.example">
            <div class="ui column">
                <problem-meta v-bind:name="'样例 '+(index+1)+' 输入'" v-bind:value="item.input" :render="false"
                    :use_pre="true">
                </problem-meta>
            </div>
            <div class="ui column">
                <problem-meta v-bind:name="'样例 '+(index+1)+' 输出'" v-bind:value="item.output" :render="false"
                    :use_pre="true">
                </problem-meta>
            </div>
        </div>
        <div class="ui container problem-meta">
            <div class="ui header">
                <h3>子任务</h3>
            </div>
            <table class="ui table">
                <thead>
                    <tr>
                        <th>子任务名</th>
                        <th>评分方式</th>
                        <th>时间限制</th>
                        <th>内存限制</th>
                        <th>说明</th>
                        <th>分数</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="subtask in data.subtasks">
                        <td>{[subtask.name]}</td>
                        <td>{[({min:"取最小值",sum:"求和"})[subtask.method]]}</td>
                        <td>{[subtask.time_limit]} ms</td>
                        <td>{[subtask.memory_limit]} MB</td>
                        <td v-html="makeHTML(subtask.comment)"></td>
                        <td>{[subtask.score]}</td>
                    </tr>
                </tbody>
            </table>
            <!-- <div class="ui " -->
        </div>
        <problem-meta name="提示" v-bind:value="data.hint"></problem-meta>
        <div class="ui container problem-meta">
            <div class="ui header">
                <h3>提交代码</h3>
            </div>
            <div class="ui one column grid">
                <div class="ui column">
                    <div class="ui two column grid" style="min-height: 500px;">
                        <div class="ui four wide column">
                            <div class="ui vertical pointing menu"
                                style="overflow-y: scroll;height:500px; max-width: 170px; overflow-x: hidden">
                                <a class="item" v-for="val,key in langs" :data-id="key"
                                    v-bind:class="{active:selected_id==key}" @click="selected_id=key">
                                    <span>
                                        <span class="ui header">
                                            <h4>{[val.display]}</h4>
                                        </span>{[val.version]}
                                    </span>
                                    <!-- <p></p> -->
                                </a>
                            </div>
                        </div>
                        <div class="twelve wide stretched column" style="padding-left: 0;">
                            <div class="ui container">
                                <editor v-model="code" v-bind:lang="langs[selected_id].ace_mode" theme="github"
                                    style="left:30px;min-height: 500px;">
                                </editor>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ui column">
                    <div class="ui segment">
                        <table class="ui very basic celled table">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>参数</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="item,i in data.extra_parameter" v-if="selected_id.match(item.lang)">
                                    <td> {[item.name]} </td>
                                    <td> {[item.parameter]} </td>
                                    <td>
                                        <div class="ui toggle checkbox">
                                            <input type="checkbox" hidden :checked="usedParameters.includes(i)?1:null">
                                            <label
                                                v-on:click="usedParameters.includes(i)?(usedParameters.splice(usedParameters.indexOf(i),1)):usedParameters.push(i)">使用</label>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="ui center aligned container" style="margin-top: 30px;">
                <div class="ui icon green button" @click="submit">
                    <i class="paper plane outline icon"></i>
                    提交！
                </div>
            </div>
        </div>
        <div class="ui " style="position: fixed;margin-left:750px;margin-top:100px;top:50px;">
            <div class="ui segment stacked" style="max-width: 300px">
                <table class="ui very basic fluid collapsing celled table">
                    <tbody>

                        <tr>
                            <td>题目分数</td>
                            <td>{[total_score]}</td>
                        </tr>
                        <tr v-if="data.using_file_io">
                            <td style="word-break: break-all;">输入/输出文件</td>
                            <td>{[data.input_file_name]}/{[data.output_file_name]}</td>
                        </tr>

                    </tbody>
                </table>
                <div class="ui header" v-if="data.downloads.length!=0">
                    <h4>文件下载</h4>
                </div>
                <table class="ui very basic fluid collapsing celled table" v-if="data.downloads.length!=0">
                    <tbody>
                        <tr v-for="file in data.downloads" style="width: 100%">
                            <td>
                                <a :href="`/api/contest/${contestID}/${problemID}/download_file/`+file">{[file]}</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>
    </div>
    <div class="ui basic modal" id="no-perm-modal">
        <div class="ui icon header">
            <i class="error icon"></i>
            错误
        </div>
        <div class="content">
            <div class="ui center aligned container">
                <p id="no-perm-text"></p>
            </div>
        </div>
        <div class="actions">
            <div class="ui green ok inverted button" onclick="window.location.href='/'">
                <i class="checkmark icon"></i>
                返回主页
            </div>
        </div>
    </div>
</div>
{%endblock%}